<template>
  <!-- style="border: 1px solid #000000;" -->
  <div align="left" class="add-border">
    <el-row class="add-border">
      <el-col :span="3" class="add-border">
        <div class="grid-content" style="display: flex;">
          <el-image
            style="width: 100px; height: 100px; border: 1px solid #cccccc; align-self:center; margin:auto;"
            :src="storeIcon"
            fit="contain"
          ></el-image>
        </div>
      </el-col>
      <el-col :span="11" class="add-border">
        <div class="grid-content">
          <div
            style="margin-top: 0px; height: 60px; font-size: 30px; font-weight: bold; display: flex;"
            class="add-border"
          >
            <div
              style="margin-left: 5px; margin-top: auto; margin-bottom: auto; margin-right: auto;"
            >{{store.storeName}}</div>
          </div>
          <div style="align-self:center; margin-top: 0px;" class="add-border">
            <div class="add-border" style="margin-left: 5px; margin-top: 5px; float: left;">
              <el-button
                type="primary"
                size="small"
                @click="visitStoreDetail()"
                icon="el-icon-s-shop"
                style="margin: 0px;"
              >店铺详情</el-button>
            </div>
            <div class="add-border" style="margin-left: 5px; margin-top: 5px; float: left;">
              <el-button
                type="warning"
                size="small"
                @click="addToCollect()"
                icon="el-icon-star-off"
              >添加收藏</el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10" class="add-border">
        <div class="grid-content" style="display: flex;">
          <el-input style="width: 250px; align-self:center;" v-model="searchInput"></el-input>
          <div style="align-self:center; margin: 20px;">
            <el-button type="primary" icon="el-icon-search" @click="searchProduce()">店内查找</el-button>
          </div>
        </div>
      </el-col>
    </el-row>

    <div style="border: 1px solid #cccccc;"></div>
    
    <div class="add-border">
      <p style="margin: 20px;">{{store.storeDesc}}</p>
    </div>
    
    <!-- <div style="border: 1px solid #cccccc;"></div> -->

    <el-dialog title="店铺详情" :visible.sync="dialogVisible" width="700px" @opened="storeDetailOpened">
      <StoreDetail ref="storeDetail" />
      <span slot="footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import StoreDetail from "@/components/Store/StoreDetail";

export default {
  name: "StoreHeader",
  data() {
    return {
      storeIcon: "", //图片绑定这个就不会加载失败
      store: {},
      searchInput: "",
      dialogVisible: false,
    };
  },
  components: {
    StoreDetail,
  },
  methods: {
    init(store) {
      this.store = store;
      // console.log(this.store);

      this.storeIcon = store.storeIcon;
    },
    searchProduce() {
      this.searchInput = this.searchInput.trim();

      this.$emit("searchProduce", this.searchInput);
    },
    visitStoreDetail() {
      this.dialogVisible = true;
    },
    storeDetailOpened() {
      this.$refs.storeDetail.init(this.store);
    },
    addToCollect() {
      var url = process.env.URL_HEAD + "/touser/user/page/check/login";

      this.$http.get(url, { withCredentials: true }).then(
        (response) => {
          //  console.log(response);

          if (response.data.status == "ok") {
            var userId = response.data.userId;
            var url =
              process.env.URL_HEAD + "/touser/user/collect/save/collect";

            this.$http
              .get(url, {
                params: { userId: userId, storeId: this.store.storeId },
                withCredentials: true,
              })
              .then(
                (response) => {
                  //  console.log(response);

                  if (response.data.status == "ok") {
                    if (response.data.message == "success")
                      this.$message.success("收藏成功！");
                    else this.$message.warning("收藏已存在");
                  } else {
                    this.$message.error("收藏失败");
                  }
                },
                (response) => {
                  this.$message.error("系统异常，请重试");
                }
              );
          } else {
            this.$message.error("请先登录");
          }
        },
        (response) => {
          this.$message.error("系统异常，请重试");
        }
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.grid-content {
  min-height: 120px;
  /* border: 1px solid #ff0000; */
}

.add-border {
  border: 1px solid #ffffff;
}
</style>
